<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="jmysql.CArea"%>
<%@ page import="validaciones.IndexData"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>UNIDAD DE SALUD-Sistema de inventario 1.0</title>
<link rel="shortcut icon" type="image/ico" href="images/sistema/u-salud-logo.ico" />
	<link rel="stylesheet" href="lib/jquery1.7/themes/start/jquery-ui-1.8.17.custom.css" />
	<link rel="stylesheet" href="css/demos.css" />
	<link rel="stylesheet" href="css/index.css" /> 
	<script type="text/javascript" src="lib/jquery1.7/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.button.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.effects.core.js"></script>		
	<script type="text/javascript" src="lib/valida.js"></script>
<%
	IndexData index=new IndexData(); 
%>

        <script type="text/javascript">
        function cambio(){
		var selection=$("#nuevo_cmbox_rol").val();
		if(selection==3)
		  $("#nuevo_cmbox_area").attr('disabled', 'disabled');
		else
		  $("#nuevo_cmbox_area").removeAttr('disabled');
	}
//al inicio
$(document).ready(function(){
    	$.ajax({
	  url: "Sesion",
	  data:'pagina='+<%=index.INDEX%>, 
	  type: 'post',
	  dataType: 'json',
	  success: function(data){
        	if(data.resultado==<%=index.Redirigir%>){
				  	//nos movemos a el sitio index de cada rol
                      window.location = data.direccion;  
                }
	  }  
	  });
});

window.onfocus= function() {
	//sino esta en la web que le toca debe mandarlo a la inicial
	$.ajax({
	  url: "Sesion",
	  data:'pagina='+<%=index.INDEX%>, 
	  type: 'post',
	  dataType: 'json',
	  success: function(data){
        	if(data.resultado==<%=index.Redirigir%>){
				  	//nos movemos a el sitio index de cada rol
                      window.location = data.direccion;  
                }
	  }  
	  });
}

$(function() {
		var name=$("#name"),password = $( "#password" ),nuevo_cmbox_area=$("#nuevo_cmbox_area"),nuevo_cmbox_rol=$("#nuevo_cmbox_rol"),
		allFields = $( [] ).add( name ).add( password ).add(nuevo_cmbox_area).add(nuevo_cmbox_rol),
		tips = $( ".validateTips" );
		
		$("button").button();
		//Eventos
		$("#nuevo_cmbox_rol").change(
			function(){
				cambio();
		});
		
                
                 function eData(UsuarioData){
                    $.ajax({
                      url: 'InicioSesion',
                      data: UsuarioData,
                      type: 'post',
                      dataType: 'json',
                      success:function(data){                      
                          if(data.resultado=='Redirigir'){
                              window.location=data.mensaje;
                          }
                      }
                     });
                 }
		$("#iniciar_sesion").click(function(){
			//validaci�n de los campos a nivel de escritura
			allFields.removeClass( "ui-state-error" );
			tips.removeClass( "ui-state-highlight");
			tips.html("<p></p>");
			var validar=false;
			//validaciones de espacio
			validar= checkRegexp('validateTips',name, /^[a-z]([0-9a-z_])+$/i, "Nombre de usuario inválido ejemplo: usuario01_uds.");
			validar= validar && checkRegexp( 'validateTips',password, /^([0-9a-zA-Z])+$/, "Password inválido" );
			
			var selection=$("#nuevo_cmbox_rol").val();
			if(selection!=3 && $("#nuevo_cmbox_area").val()==undefined){
				validar=false;
				UpdateError('validateTips',nuevo_cmbox_area, 'Debe escoger un área para iniciar');
			}
			
                        
                        /*Si es rol==3 => area=1*/
                        var areax;
                        if(nuevo_cmbox_rol.val()==3)
                            areax=1;
                        else
                            areax=nuevo_cmbox_area.val();
                        

			//Todos los requerimientos son v�lidos
			if(validar){
				//inicio de la sesi�n sin errores
                                console.log("rol¨:"+nuevo_cmbox_rol.val())
				eData({
                                    nomusuario:name.val(),
                                    password:password.val(),
                                    rol:nuevo_cmbox_rol.val(),
                                    area:areax
                                });
			}
		});
	});

</script>
</head>
<body>

<div id="header">
	<table>
	<tr class="ui-widget-content ui-corner-all">
	<td class=""><img src="images/sistema/usac.png"/></td>
	<td class="ui-widget-header ui-corner-all"><h1>SISTEMA DE INVENTARIO UNIDAD DE SALUD</h1></td>
	<td class=""><img src="images/sistema/u-salud-logo.jpg"/></td>
	</tr>
	</table>
</div>

<div id="form-login">
	<p style="text-align:center;font-size:12px;"class="validateTips"></p>
	<fieldset class="ui-widget-content ui-corner-all">
		<label for="name">Nombre de usuario</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> 
		<label for="ROL">Rol</label>
		<select class="ui-widget-content ui-corner-all" id="nuevo_cmbox_rol" onkeyup="cambio()">
			<option value="1">RESPONSABLE DE AREA</option>
			<option value="2">USUARIO</option>
			<option value="3">ADMINISTRADOR</option>
		</select>
		<label for="AREA">AREA</label>
		<select class="ui-widget-content ui-corner-all" id="nuevo_cmbox_area" >
			<%
				//Aca se cargan lás áreas creadas 
				CArea ca=new CArea();
				out.print(ca.ListaAreas()); 
			%>
		</select>
		<!-- Aca están las áreas deben ser cargadas por una consulta -->
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
		<div align="center" style="font-size:14px;">
			<button id="iniciar_sesion">Iniciar sesión</button>
		</div>	 
	</fieldset>
</div>
</body>	
</html>